<template>
    <div>
      <h1>跑腿员列表</h1>
      <div class="a">
        <el-input class="b" v-model="pagination.name" placeholder="按名字搜索跑腿员"></el-input>
        <svg class="search" aria-hidden="true" @click="getAll()" >
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
      <div class="z">
        <el-table :data="workers" stripe style="width: 100%">
          <el-table-column prop="wid" label="ID" width="120" />
          <el-table-column prop="username" label="用户名" width="130" />
          <el-table-column prop="password" label="密码" width="130" />
          <el-table-column prop="name" label="姓名" width="130" />
          <el-table-column prop="sex" label="性别" width="120" />
          <el-table-column prop="balance" label="余额" width="130" />
          <el-table-column prop="phonenum" label="手机号" width="170" />
          <el-table-column prop="idcard" label="身份证号" width="220" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="primary"  @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <!-- 编辑弹出框 -->
    <el-dialog v-model="dialogFormVisible4Edit" title="跑腿员" width="45%" align-center>
      <el-form :model="formData" label-width="120px">
      <el-form-item label="用户名">
        <!-- <el-input v-model="formData.username" /> -->
        <span >{{formData.username}}</span>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.password" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formData.name"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formData.sex"/>
      </el-form-item>
      <el-form-item label="余额">
        <el-input v-model="formData.balance"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formData.phonenum"/>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="formData.idcard"/>
      </el-form-item>
      </el-form>
      <el-form-item>
        <el-button type="primary" @click="handleEdit()">修改</el-button>
        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
      </el-form-item>
    </el-dialog>

      
      <div class="pagination-container">
        <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
</template>

<script setup>
import axios from 'axios'
import { getApi,postApi,deleteApi,updateApi} from '@/util/api'
</script>

<script>
    export default {
        data() {
          
            return {
                workers: [],
                pagination:{
            currentPage:1,//当前页码
            pageSize:7,//一页多少条
            total:0,
            name:""
          } ,
              dialogFormVisible4Edit:false,//编辑表单是否可见
              formData:{},//表单数据
            }
        },
        created(){
          this.getAll();
        }
        ,
        methods:{
          //分页
          getAll(){
            getApi("admin/workers/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"?name="+this.pagination.name).then((rs)=>{
                this.pagination.pageSize = rs.data.data.size;
                this.pagination.currentPage = rs.data.data.current;
                this.pagination.total = rs.data.data.total;
                this.workers=rs.data.data.records;
                }).catch(error=>{
                    alert(error);
                })
          },
          handleCurrentChange(currentPage){
            //修改页码值为当前选中页码值
            this.pagination.currentPage = currentPage;
            //执行查询
            this.getAll();
          },
          //删除
        handleDelete(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info',
          confirmButtonText:"确定",
          cancelButtonText:"取消"
        }).then(()=>{
          deleteApi("admin/workers/"+row.wid).then((res)=>{
        if(res.data.flag){
            
            this.$message.error("删除失败");
        }else{
          this.$message.success("删除成功");
        }
        }).finally(()=>{
          this.getAll();
        });
        }).catch(()=>{
          this.$message.info("取消删除操作");
        });},


         //编辑 弹窗
         handleUpdate(row){
          getApi("admin/workers/"+row.wid).then((res)=>{
            if(res.data.code == 1){
              this.formData = res.data.data;
              this.dialogFormVisible4Edit = true;
            }else{
              this.$message.error("数据同步失败，自动刷新");
            }
          }).finally(()=>{
            this.getAll();
        })},
                //修改
                handleEdit(){
          updateApi("admin/workers",this.formData).then((res)=>{
            if(res.data.code==1){
              this.dialogFormVisible4Edit = false;
              this.$message.success("修改成功");
            }else{
              this.$message.error("修改失败，请重试");
            }
          }).finally(()=>{
          this.getAll();
        });
          }


        }
        ,
        mounted() {
            
        },
    }
</script>


<style lang="scss" scoped>
  .pagination-container{
    position: absolute;
    right: 70px;
    margin-top: 10px;
  }
  .a{
    margin-top: 20px;
    margin-left: 400px;
    position: relative;
    .b{
      font-size: 24px;
      width: 300px;
    }
    .search{
      position: absolute;
      margin-top: 1px;
      margin-left: 5px;
      width: 2em;
      height: 2em;
    }
  }

  .z{
    margin-top: 30px;
  }
</style>